<template>
	<view class="content">
		<!-- header 开始 -->
		<view class="header" :style="'background:url(' +img_base_url + '/beijing.png)'">
			<!-- <img src="../../static/beijing@2x.png" alt=""> -->
			<view class="header-title" :style="'padding-top:' + (height + 45) + 'rpx'">农乎</view>
			<!-- <input type="text" class="header-input"> -->
		</view>
		<!-- header 结束 -->

		<!-- 轮播开始 -->
		<view class="banner">
			<swiper class="swiper" @change="changeSwiper" autoplay>
				<block v-for="(item, index) in swiperImg" :key="index">
					<swiper-item>
						<img :src="item" alt="" style="width:100%;height:100%">
					</swiper-item>
				</block>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block v-for="(item,index) in swiperImg.length" :key="item">
					<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
				</block>
			</view>
		</view>
		<!-- 轮播结束 -->

		<!-- 菜单开始 -->
		<view style="margin-top:-50rpx">
			<view class="menu">
				<block v-for="(item, index) in firstIconList" :key="index">
					<view class="menu-item" @tap="goClassify(item)">
						<view class="menu-item-img">
							<img :src="item.icon" alt="">
						</view>
						<view class="menu-item-text">{{item.class_name}}</view>
					</view>
				</block>
			</view>
			<!-- <view class="menu">
				<view class="menu-item" @tap="goMenu">
					<view class="menu-item-img">
						<img :src="img_base_url + '/jiazhuang.png'" alt="">
					</view>
					<view class="menu-item-text">家装维修</view>
				</view>
				<view class="menu-item" @tap="goDeZhuang">
					<view class="menu-item-img">
						<img :src="img_base_url + '/chuhaigoupiao.png'" alt="">
					</view>
					<view class="menu-item-text">出海购票</view>
				</view>
				<view class="menu-item" @tap="goMenu">
					<view class="menu-item-img">
						<img :src="img_base_url + '/jiudianminsu.png'" alt="">
					</view>
					<view class="menu-item-text">酒店民宿</view>
				</view>
				<view class="menu-item" @tap="goMenu">
					<view class="menu-item-img">
						<img :src="img_base_url + '/lvyoudaogou.png'" alt="">
					</view>
					<view class="menu-item-text">旅游导航</view>
				</view>
			</view> -->
		</view>
		<!-- 菜单结束 -->

		<!-- 商品区域开始 -->
		<view class="shopping">
			<!-- 拼团区域 -->
			<view class="shopping-item">
				<view class="shopping-item-title" :style="'background:url('+ img_base_url + '/1.png) no-repeat center;background-size: 186rpx 17rpx;'">拼团区</view>
				<view class="shopping-item-box">
					<block v-for="(item, index) in groupList" :key="index">
						<view class="left" v-if="item.group_buy_type == 1" @tap="goGroupCommidtyDetail(item.id)">
							<view class="left-line1">
								<view class="left-title">今日<text style="color:#FF2C2C">必拼</text></view>
								<view class="left-time">
									<view class="left-time-title">限时抢</view>
									<view class="left-time-number">
										<uni-countdown :show-day="false" :hour="item.hour" :minute="item.minute" :second="item.second" :reset="reset"  color="#fff" background-color="#24C79C" splitor-color="#fff" @timeup="timeUp"></uni-countdown>
									</view>
								</view>
							</view>
							<view class="left-line2">
								<img :src="item.commodity_image[0]" alt="" style="width:100%;height:100%">
							</view>
							<view class="left-line3">
								<view style="color:#999999;font-size:22rpx;margin-left:13rpx">{{item.sales_volume}}人已拼</view>
								<view style="color:#FF1E1E;font-size:30rpx;margin-right:29rpx">￥{{item.activity_price}}</view>
							</view>
						</view>
					</block>
					<view class="right">
						<block v-for="(item, index) in groupList" :key="index">
							<view class="top" v-if="item.group_buy_type == 0" @tap="goGroupCommidtyDetail(item.id)">
								<img :src="item.commodity_image[0]" alt="" style="width:100%;height:100%">
							</view>
						</block>
						<block v-for="(item, index) in groupList" :key="index">
							<view class="bottom" v-if="item.group_buy_type == 2" @tap="goGroupCommidtyDetail(item.id)">
								<view class="bottom-line1">
									<view class="right-title">今日上新</view>
									<view class="right-time">
										<uni-countdown :show-day="false" :hour="item.hour" :minute="item.minute" :second="item.second" :reset="reset" splitor-color="#24C79C" @timeup="timeUp"> </uni-countdown>
									</view>
								</view>
								<view class="bottom-line2">
									<img :src="item.commodity_image[0]" alt="">
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<!-- 拼团区域结束 -->

			<!-- 人气推荐、新品发售、热卖单品开始 -->
			<block v-for="(item, index) in columnList" :key="index">
				<view class="shopping-item">
					<view class="shopping-item-title" :style="'background:url('+ img_base_url + '/1.png) no-repeat center;background-size: 186rpx 17rpx;'">{{item.name}}</view>
					<view class="shopping-item-box">
						<block v-for="(item2, index2) in item.goods_spu" :key="index2">
							<view class="shopping-item-box-item" @tap="goCommodityDetail(item2.id)">
								<view class="shopping-item-img">
									<img :src="item2.commodity_image_thum" alt="" style="width:100%;height:100%">
								</view>
								<view class="shopping-item-info">
									<view class="shopping-item-name">{{item2.spu_name}}</view>
									<view class="shopping-item-price">￥{{item2.activity_price}}</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</block>
			<!-- 人气推荐、新品发售、热卖单品结束 -->
		</view>
		<!-- 商品区域结束 -->
		<tabBar address="0"></tabBar>
	</view>
</template>

<script>
import tabBar from '../../components/tabBar/tabBar'
// import countDown from "../../components/countdown/countdown" 
import uniCountdown  from "../../components/linnian-CountDown/uni-countdown" 
import { IndexModel } from '../../model/index.js'
import { config } from '../../common/utils/congfig'
const indexModel = new IndexModel()
export default {
	components: {
		tabBar,
		// countDown,
		uniCountdown
	},
	data() {
		return {
			img_base_url: config.img_base_url,
			swiperImg: [],
            current: 0,
            swiperCurrent: 0,
			height: 0,
			reset: false,
			firstIconList: [],
			columnList: [],
			commidtyList: [],
			groupList: [],
			type: '',
			groupTime: {},
			todayHour: 0,
			todayMinute: 0,
			todaySecond: 0,
			groupHour: 0,
			groupMinute: 0,
			groupSecond: 0,
		}
	},
	onLoad() {
		this.reset = false
		uni.getSystemInfo().then((res) => {
			this.height = res[1].statusBarHeight
		})
		this._getIndexIcon()
		this._getHomeColumn()
		this._getIndexGroupCommidty()
		// let skey = uni.getStorageSync('skey')
		// if(skey == '') {
		// 	this.login()
		// }
		this.login()
		this.getIndexSwiper()
	},
	onShareAppMessage() {
		uni.share({
			provider: 'weixin',
			scene: 'WXSceneSession',
			type: 5,
			title: '农乎',
			imageUrl: 'http://qiniu.quanyubao.cn/logo.png',
			miniProgram: {
				id: 'gh_58835c3bb0aa',
				path: 'pages/index/index',
				type: 0
			}
		})
	},
	methods: {
		// 获取sessionKey
		login() {
            uni.login({
				provider: 'weixin',
				success: res => {
					console.log(res)
					if(res.errMsg === "login:ok") {
                        uni.setStorageSync('code', res.code)
                        let data = {
                            code: res.code
                        }
                        indexModel.userLogin(data).then((res) => {
                            if(res.code == 200) {
                                uni.setStorageSync('skey', res.data.skey)
                                uni.setStorageSync('userInfo', JSON.stringify(res.data.userinfo))
                            }
                        })
					}
				}
			})
        },
		changeSwiper(e) {
            this.swiperCurrent = e.detail.current;
		},
		timeUp() {
			
		},
		// 点击第一排Icon去分类页面
		goClassify(item) {
			getApp().globalData.iconType = item.id
			uni.switchTab({
				url: '/pages/classify/classify'
			})
		},
		goMenu(item) {
			
		},
		// 获取首页轮播图
		getIndexSwiper() {
			indexModel.getSwiper().then((res) => {
				if(res.code == 200) {
					this.swiperImg = res.data
				}
			})
		},
		// 获取首页Icon
		_getIndexIcon() {
			indexModel.getIndexIcon().then((res) => {
				if(res.code == 200) {
					this.firstIconList = res.data
					console.log(this.firstIconList)
				}
			})
		},
		// 获取首页板块商品信息
		_getHomeColumn() {
			indexModel.getHomeColumn().then((res) => {
				if(res.code == 200) {
					this.columnList = res.data
				}
			})
		},
		// 去商品详情页面
		goCommodityDetail(id) {
			uni.navigateTo({
				url: '/pagesA/commodity-detail/commodity-detail?id=' + id
			})
		},
		// 获取首页拼团商品信息
		_getIndexGroupCommidty() {
			indexModel.getIndexGroupCommidty().then((res) => {
				if(res.code == 200) {
					this.groupList = res.data
					this.groupList.map((item) => {
						if(new Date(item.end_time).getTime() > new Date().getTime()) {
                            if(item.group_buy_type == 1 || item.group_buy_type == 2) {
								let dateInterval = (new Date(item.end_time).getTime() - new Date().getTime())/1000
								item.hour = Math.floor((dateInterval / 3600) % 24)
								item.minute = Math.floor((dateInterval / 60) % 60)
								item.second = Math.floor(dateInterval % 60)
							}
                        }
					})
					console.log(this.groupList)
				}
			})
		},
		// 去拼团列表页面
		goGroupCommidtyDetail(id) {
			uni.navigateTo({
				url: '/pagesA/group-buying/group-buying?commidtyId=' + id
			})
		},
		// 去的装小程序
		goDeZhuang() {
			uni.navigateToMiniProgram({
				appId: 'wx81070801757244d5',
				path: '',
				envVersion: 'release',
				success(res) {
					// 打开成功
					uni.showToast({
						title: '跳转成功',
						icon: 'success'
					})
				}
			})
		}
	},
	
}
</script>

<style>
	page {
		height: 100%;
	}
	.tui-countdown-item {
		background: #24C79C !important;
		border: none !important;
	}
	.tui-countdown-colon {
		color: #FFFFFF !important;
	}
	.content {
		position: relative;
		width: 100%;
		overflow-x: hidden;
	}	
	.header {
		width: 100%;
		height: 355rpx;
	}
	.header img {
		width: 100%;
		height: 100%;
	}
	.header-title {
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 500;
	}
	.header-input {
		width: 550rpx;
		height: 57rpx;
		border-radius:29rpx;
		background: #FFFFFF;
		margin-left: 98rpx;
		margin-top: 41rpx;
	}
	.banner {
		position: relative;
		top: -100rpx;
		width: 100%;
		height: 100%;
		margin-left: 40rpx;
	}
	.banner img {
		width: 100%;
		height: 100%;
	}
	.swiper {
        width: 672.9rpx;
        height: 296rpx;
        border-radius: 16rpx;
        overflow: hidden;
        margin-top: 16rpx;
        position: relative;
    }
	.swiper-item {
        width: 672.9rpx;
        height: 296rpx;
        border-radius: 16rpx;
    }
	.dots {
        position: absolute;
        bottom: 20rpx;
        left: 50%; 
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);        
        z-index: 99;
        display: flex;
        flex-direction: row;
        justify-content: center      
    }
	.dot {
        width: 10rpx;
        height: 9rpx;
        transition: all .6s;
        background:rgba(255,255,255,1);
        margin-right: 10rpx;
		border-radius: 50%;
    }
	.active {
        width: 24rpx;
        height: 9rpx;
        background:rgba(255,255,255,1);
		border-radius: 4rpx;
    }
	.menu {
		width: 100%;
		/* height: 94rpx; */
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.menu-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.menu-item-img {
		width: 94rpx;
		height: 94rpx;
	}
	.menu-item img {
		width: 100%;
		height: 100%;
	}
	.menu-item-text {
		color: #666666;
		font-size: 24rpx;
		margin-top: 14rpx;
	}
	.shopping {
		margin-bottom: 200rpx;
	}
	.shopping-item {
		margin-top: 62rpx;
	}
	.shopping-item-title {
		/* background: url('../../static/1.png'); */
		width: 100%;
		color: #333333;
		font-size: 32rpx;
		text-align: center;
		font-weight: 500;
	}
	.shopping-item-box {
		margin-top: 45rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 38rpx;
	}
	.shopping-item-box .left {
		width: 359rpx;
		height: 296rpx;
		background: #FFFFFF;
		overflow: hidden;
	}
	.shopping-item-box .right {
		width: 304rpx;
		height: 296rpx;
	}
	.left-line1 {
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
	}
	.left .left-title {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 11rpx;
	}
	.left .left-time {
		width: 206rpx;
		height: 36rpx;
		border: 1rpx solid rgba(36,199,156,1);
		border-radius: 18rpx;
		margin-right: 11rpx; 
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		line-height: 38rpx;
	}
	.left-time-title {
		color: #24C79C;
		margin-left: 12rpx;
	}
	.left-time-number {
		width: 122rpx;
		height: 36rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 16rpx;
		background: rgba(36,199,156,1);
	}
	.left-line2 {
		width: 359rpx;
		height: 193rpx;
		margin-top: 12rpx;
	}
	.left-line3 {
		display: flex;
		justify-content: space-between;
		line-height: 38rpx;
	}
	.right .top {
		width: 304rpx;
		height: 117rpx;
	}
	.right .bottom {
		width: 304rpx;
		height: 164.3rpx;
		background: #FFFFFF;
		margin-top: 15rpx;
		overflow: hidden;
	}
	.bottom .bottom-line1 {
		display: flex;
		justify-content: space-between;
		margin-top: 7rpx;
	}
	.bottom .bottom-line2 {
		width: 304rpx;
		height: 109rpx;
		margin-top: 13rpx;
	}
	.bottom .bottom-line2 img {
		width: 100%;
		height: 100%;
	}
	.bottom-line1 .right-title {
		color: #333333;
		font-size: 26rpx;
		font-weight: bold;
		margin-left: 12rpx;
	}
	.bottom-line1 .right-time {
		width: 127rpx;
		height: 36rpx;
		border: 1rpx solid rgba(36,199,156,1);
		border-radius: 18rpx;
		border-top-left-radius: 18rpx;
		border-bottom-left-radius: 18rpx;
		margin-right: 41rpx;
		color: #24C79C;
		font-size: 22rpx;
		font-weight: 500;
		text-align: center;
		line-height: 36rpx;
	}
	.shopping-item-box-item {
		width: 215rpx;
		height: 310rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
	}
	.shopping-item-img {
		width: 215rpx;
		height: 230rpx;
	}
	.shopping-item-info {
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;
	}
	.shopping-item-name {
		color: #333333;
		font-size: 24rpx;
		font-weight: 500;
		margin-left: 11rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shopping-item-price {
		color: #FF1E1E;
		font-size: 24rpx;
		font-weight: 500;
		margin-right: 18rpx;
	}
	.uni-countdown .uni-countdown__number {
		height: 100%;
		margin: 0;
		padding: 0;
		border: none;
		font-size: 22rpx;
		line-height: 30rpx;
	}
	.uni-countdown .uni-countdown__splitor {
		font-size: 22rpx;
		line-height: 28rpx;
	}
</style>
